<template>
  <div class="news-box">
    <div 
      class="scroll-container" 
      ref="scrollContainer"
      @scroll.passive="handleScroll"
    >
      <div 
        v-for="(item, index) in showDataList" 
        :key="index"
      >
        <router-link class="one-new" to="/article">
          <!-- 新闻左侧标题、评论、来源部分 -->
          <div class="new-left">
            <h3>{{item.title}}</h3>
            <div class="info">
              <div class="info-detail">
                <span>人数：{{item.reads}}</span>
                <span>来源：{{item.from}}</span>
              </div>
              <span class="date">{{item.date}}</span>
            </div>
          </div>
          <!-- 新闻右侧图片部分 -->
          <div class="new-right">
            <img :src="imgsList[item.image]" alt="pic">
          </div>
        </router-link>
      </div>
    </div>
    <div class="msg" v-if="isRequestStatus">
      <h2>{{requestMsg}}</h2>
    </div>
  </div>
</template>

<script>
import imgsList from "../components/newImgs"
import { News } from "@/api/news.js"
export default {
  data () {
    return {
      imgsList,
      allDataList: [],
      // 数据请求状态
      isRequestStatus: true,
      // 请求数据提示信息
      requestMsg: '小二正在努力，请耐心等待...',
      // 列表单条数据的高度，需要固定
      oneHeight: 101,
      // 当前页面可以容纳的列表最大数量
      containSize: 0,
      // 可视元素开始索引
      startIndex: 0
    }
  },
  created () {
    this.getMockData(20)
  },
  mounted() {
    // 根据显示区域高度，计算可以容纳最大列表数量
    this.getContainSize()
    window.onresize = this.getContainSize
    window.orientationchange = this.getContainSize
  },
  computed: {
    // 根据startIndex和屏幕容积containSize计算endIndex
    endIndex() {
      let endIndex = this.startIndex + this.containSize
      // 判断截取到最后元素是否存在，如果不存在则只取最后一位
      if(!this.allDataList[endIndex]) {
        endIndex = this.allDataList.length -1
      }
      return endIndex
    },
    // 根据容器最大容积数，截取显示实际需要渲染的列表
    showDataList() {
      return this.allDataList.slice(this.startIndex, this.endIndex)
    }
  },
  methods: {
    // 获取模拟数据
    getMockData (num) {
      this.isRequestStatus = true
      News.getNewsList({num}).then(res => {
        this.allDataList = res.list
        this.isRequestStatus = false
      }).catch(err => {
        console.log(err)
        this.requestMsg = '网络出错了，请检查~'
      })
    },
    // 计算容器的最大容积
    getContainSize() {
      const offsetHeight = this.$refs.scrollContainer.offsetHeight
      // ~~ 等于Math.floor()
      this.containSize = ~~(offsetHeight / this.oneHeight) + 2
      console.log(this.containSize)
      console.log(this.$refs.scrollContainer.offsetHeight)
    },
    // 定义滚动事件
    handleScroll() {
      this.startIndex = ~~(this.$refs.scrollContainer.scrollTop/this.oneHeight)
    }
  }
}
</script>

<style lang='scss' scoped>
.news-box {
  width: 100%;
  height: 100%;
  .scroll-container {
    width: 100%;
    height: 100vh;
    overflow: auto;
    box-sizing: border-box;
    &::-webkit-scrollbar{
      width:0px
    }
    .one-new {
      position: relative;
      text-decoration: none;
      display: flex;
      border-bottom: 1px solid #ddd;
      padding: 10px;
      color: #2c3e50;
      box-sizing: border-box;
      .new-left {
        height: 80px;
        flex: 1;
        position: relative;
        margin-right: 10px;
        h3 {
          padding: 0;
          margin: 0;
          font-size: 16px;
        }
        .info {
          display: flex;
          justify-content: space-between;
          align-items: baseline;
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          .info-detail {
            display: inline-block;
            span {
              font-size: 10px;
            }
          }
          .date {
            display: inline-block;
            font-size: 10px;
          }
        }
      }
      .new-right {
        img {
          display: block;
          height: 80px;
          width: 100px;
        }
      }
    }
  }
  .msg {
    text-align: center;
    font-size: 12px;
  }
}
</style>